<template>
	<view>
		<view class="zhezhao" v-if="zhezhao" @click="set_zhezhao"></view>
		<view class="gif" v-if="status">
			<image src="https://wechat-pictures-1301970825.file.myqcloud.com/yuyindaka/gifs.gif"></image>
		</view>
		<!-- 成功 -->
		<view class="sussec" v-if="is_sussec">
			<image src="https://wechat-pictures-1301970825.file.myqcloud.com/yuyindaka/dakachenggong@2x.png"></image>
			打卡成功！
		</view>
		<!-- 失败 -->
		<view class="error" v-if="is_error">
			<view class="icons-x" @click="set_zhezhao">
				<uni-icons type="clear" size="30" color="#fff"></uni-icons>
			</view>
			<view class="icon">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/yuyindaka/shibai.png"></image>
			</view>
			<view class="error-title">未识别成功</view>
			<view class="error-msg">请再次大声、清晰地说出上方标语!</view>
		</view>
		<view class="top">
			<view class="title">{{message}}</view>
      <view class="top-icon">标语</view>
		</view>
    <view class="message">
      请按住下方
      <image :src="imageUrl+'vicon.png'"></image>
      图标，打卡领取积分
    </view>
		<view class="w-content">

			<view class="content">
				<view class="title">
					您已连续打卡<text>{{num}}</text>天
				</view>
				<view class="punch-list">
					<view :class="item.is_qiandao==1?'punch-item xuanzhong':'punch-item'"
						v-for="(item,index) in message_log">
						<view class="punch-num" v-if="item.shuoming" style="color: #5CAE77;">{{item.shuoming}}</view>
						<view class="punch-num" v-if="!item.shuoming">{{item.yr}}</view>
						<view class="punch-icon" :style="(item.beishu>1 && item.is_qiandao!=1)?'width: 70rpx;height: 60rpx;':''">
							<image v-if="!(item.beishu>1 && item.is_qiandao!=1)" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/voiceNote/icon_jinbi.png">
							<image v-if="(item.beishu>1 && item.is_qiandao!=1)" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/voiceNote/icon_fanbei.png">
							</image>
						</view>
						<view class="punch-msg">{{item.integral}}积分</view>
						<view class="punch-beishu" v-if="item.beishu>1 && item.is_qiandao!=1">{{item.beishu}}倍</view>
<!--            状态-->
            <view class="message-status" v-if="item.is_today===0">{{item.is_qiandao===0?'待领取':'已领取'}}</view>
            <view class="message-status" style="font-weight: 600" v-if="item.is_today===1">{{item.is_qiandao===0?'打卡领取':'已领取'}}</view>
					</view>
				</view>
				<view class="msg">
					<view class="msg-title">
						<view class="msg-icon">
							<image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/voiceNote/icon_tishi@2x.png">
							</image>
						</view>
						<view class="msg-value">获取积分奖励：</view>
					</view>
					<view class="msg-title">
<!--						<view class="msg-icon"></view>-->
						<view class="msg-value msgs">连续打卡，节日打卡奖励翻倍呦！</view>
					</view>
				</view>
			</view>
			<view class="voice" @longpress="longpress" @touchend="touchend">
				<view class="voice-icon">
					<image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/voiceNote/button-icon.png"></image>
				</view>
				<view class="voice-msg">按住这里，请用普通话说出上方标语</view>
				<view class="voice-msg">说完松手完成打卡。</view>
			</view>
		</view>

	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				voicePath: '',
				status: false,
				zhezhao: false,
				Loading: false,
				message: "",
				message_log: "",
				voicedata: {},
				proportion: 0.7, //对比比率，默认100%
				is_sussec: false,
				is_error: false,
				num: 0,
				is_daka: true,
				error_src:"https://wechat-pictures-1301970825.file.myqcloud.com/yuyindaka/error.mp3",
				sussec_src:"https://wechat-pictures-1301970825.file.myqcloud.com/yuyindaka/sussec1.mp3",
				zhong_src:"https://wechat-pictures-1301970825.file.myqcloud.com/yuyindaka/zhong.mp3",
        imageUrl:'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/voiceNote/'
			}
		},
		onLoad() {
			let self = this;
			recorderManager.onStop(function(res) {
				console.log(res);
				self.voicePath = res.tempFilePath;
				self.voicedata = res;
				// self.Audio2dataURL(res.tempFilePath)
				self.shibie()
			});
			recorderManager.onError(function(res) {
				console.log(res);
			})
			this.get_message()
			this.get_message_log()
			this.get_baidu_token()
		},
		methods: {
			//获取话术
			get_message() {
				var _this = this;
				_this.$api.doRequest("get", "api/get_voice_huashu", {}).then(res => {
					_this.message = res.data.data
				})
			},
			//获取签到记录
			get_message_log() {
				var _this = this;
				_this.$api.doRequest("get", "/api/user_voicedaka_info", {}).then(res => {
					_this.message_log = res.data.data.daka_list;
					_this.num = res.data.data.lianxu_daka_days
					_this.is_daka = res.data.data.is_daka_today == 1 ? false : true;
					console.log(_this.message_log);
				})

			},
			startRecord() {
				var _this=this;
				if (!this.is_daka) {
					_this.voicePath=_this.zhong_src;
					_this.playVoice()
					uni.showToast({
						title: "今日您已打卡",
						icon: 'error'
					})
					return false;
				}
				console.log('开始录音');
				this.voicePath = "";

				recorderManager.start({
					format: 'pcm'
				});
				this.status = true;
				this.zhezhao = true;
			},
			endRecord() {
				console.log('录音结束');

				recorderManager.stop();
			},
			playVoice() {
				console.log('播放录音');
				this.Loading = true;
				var _this = this;
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			longpress(e) {
				this.startRecord()
			},
			touchend(e) {
				var _this = this;
				//停止录音
				this.status = false;
				this.zhezhao = false;
				this.endRecord()
				//    var time=setInterval(function(){
				// 	if(_this.voicePath){
				// 		clearTimeout(time);
				// 		// _this.playVoice();
				// 		_this.shibie()
				// 	}
				// },1000)
			},
			//获取百度token
			get_baidu_token() {
				this.$api.doRequest("post", "/dianzhang/WechatWork/get_baidu_token", {}).then(res => {
					this.token = res.data.data.access_token;
				})
			},
			//上传语音
			shibie() {
				uni.showLoading({
					title: "识别中"
				})
				var _this = this;
				var data = {
					format: "pcm",
					rate: 16000,
					channel: 1,
					cuid: "baidu_workshop",
					token: this.token,
					speech: "",
					len: ""
				}
				pathToBase64(this.voicedata.tempFilePath)
					.then(base64 => {
						data.speech = base64.url;
						data.len = base64.size
						console.log(data);
						uni.request({
							method: "post",
							url: "https://vop.baidu.com/server_api",
							data: data,
							header: {
								'content-type': 'application/json',
							},
							success: function(result) {
								uni.hideLoading()
								if (result.data.err_no != 0 || result.data.result[0] == "") {
									uni.showToast({
										title: "语音识别失败",
										icon: "error"
									})
									_this.voicePath=_this.error_src;
									_this.playVoice()
									_this.is_error = true;
									_this.zhezhao = true;
									return false;
								}
								var msg = result.data.result[0];
								_this.duibi(msg)
							},
						})
						// var res={
						// 	audio_format:"wav",
						// 	audio:base64.url,
						// 	sample_rate:16000,
						// 	lang:'zh_cn'
						// }
						// console.log(res,'ceshi231231');
						// uni.request({
						// 	method: "post",
						// 	url: "http://kmxm.online:18090/paddlespeech/asr",
						// 	data: res,
						// 	header: {
						// 		'content-type': 'application/json',
						// 	},
						// 	success: function(result) {
						// 		console.log(result)
						// 		uni.showToast({
						// 			title:JSON.stringify(result),
						// 			icon:"none"
						// 		})
						// 		},
						// 		})
					})
				// .catch(error => {
				//   console.log(error)
				// })


			},
			// Audio2dataURL(path) {
			// 			var _this = this;
			// 		const fs = wx.getFileSystemManager();
			// 		      fs.readFile({
			// 		        filePath:path,
			// 		        success: (res)=>{
			// 		          this.audio_data = res.data;
			// 		        }
			// 		      });
			// 		},
			//语音打卡比例计算
			duibi(msg) {
				var _this=this;
				var message = this.message;
				var num = 0;
				for (let i = 0; i < message.length; i++) { //需要输入的字符
					for (let k = 0; k < msg.length; k++) {
						if (message[i] == msg[k]) {
							num = num + 1;
						}
					}
				}
				if (this.proportion <= (num / message.length)) {
					this.add();
				} else {
					// uni.showToast({
					// 	title:"匹配率为"+(num/message.length*100)+"请重新打卡",
					// 	icon:"none"
					// })
					//降低匹配率
					this.is_error = true;
					this.zhezhao = true;
					uni.hideLoading()
					this.proportion = 0.3;
					_this.voicePath=_this.error_src;
					_this.playVoice()
				}
				console.log(num / message.length * 100);
			},
			//语音打卡
			add() {
				var _this = this;
				this.$api.doRequest("get", "/api/voicedaka_now", {}).then(res => {
					if (res.data.code == 200) {
						// _this.is_sussec=true;
						// _this.zhezhao=true;

						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
						_this.voicePath=_this.sussec_src;
						_this.playVoice()
						setTimeout(function() {
							_this.get_message_log()
						}, 3000)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "error"
						})
						_this.voicePath=_this.error_src;
						_this.playVoice()
					}
			 })
			},
			//关闭遮罩
			set_zhezhao() {
				this.zhezhao = false;
				this.is_error = false;
				this.is_sussec = false
			},
			//特殊字符过滤
			stripscript(s) {
				var pattern = new RegExp("[[\\]/:*?\"<>|]");
				var rs = "";
				for (var i = 0; i < s.length; i++) {
					rs = rs + s.substr(i, 1).replace(pattern, '');
				}
				return rs;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F6F7;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		min-height: 240upx;
		text-align: center;
		// line-height: 254upx;
		font-size: 60upx;
		color: #fff;
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/voiceNote/banner.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20upx;
    font-weight: 600;
    position: relative;
	}
  .top .title{
    width: 100%;
    box-sizing: border-box;
    padding: 30upx;
  }
  .top-icon{
    position: absolute;
    left: 0;
    top: 13upx;
    font-size: 34upx;
    font-weight: 500;
    text-align: center;
    height: 52upx;
    width: 101upx;
    line-height: 52upx;
    background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/voiceNote/title-icon.png);
    background-size: 100% 100%;
  }

	.w-content {
		box-sizing: border-box;
		width: 100%;
		padding: 30upx;
		background-color: #F2F6F7;
	}

	.voice {
		width: 100%;
		//height: 264upx;
		border-radius: 20upx;
		//background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.voice-icon {
		width: 170upx;
		height: 170upx;
		margin-bottom: 26upx;
	}
  .voice-icon image{
    width: 100%;
    height: 100%;
  }

	.voice-msg {
		font-size: 36upx;
		color: #333;
    font-weight: 600;
	}

	.content {
		width: 100%;
		background-color: #fff;
		border-radius: 20upx;
		margin-bottom: 30upx;
		box-sizing: border-box;
		padding: 16upx 24upx;
	}

	.content .title {
		font-size: 32upx;
		color: #000;

	}

	.content .title text {
		color: #EA7C0F;
    font-size: 40upx;
	}

	.punch-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20upx;
	}

	.punch-item {
		width: 142upx;
		height: 154upx;
		border-radius: 12upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-color: #DCF2E3;
		margin-bottom: 74upx;
		box-sizing: border-box;
		padding: 12upx 0upx 9upx 0;
		position: relative;
	}
  .message-status{
    position: absolute;
    left: 0;
    bottom: -48upx;
    width: 100%;
    text-align: center;
    font-size: 32upx;
    color: #6EAE83;
  }

	.punch-num {
		font-size: 28upx;
		color: #5CAE77;
	}

	.punch-msg {
		font-size: 26upx;
		color: #5CAE77;
	}

	.punch-icon {
		width: 42upx;
		height: 50upx;
	}

	.msg {
		width: 100%;
	}

	.msg-title {
		display: flex;
		margin-bottom: 15upx;
    align-items: center;
	}

	.msg-icon {
		width: 30upx;
		height: 30upx;
		margin-right: 14upx;
	}

	.msg-value {
		font-size: 30upx;
		color: #666666;
    font-weight: 500;
	}

	.msgs {
		font-size: 28upx;
	}

	.zhezhao {
		width: 100vw;
		height: 100vh;
		background-color: #000;
		opacity: 0.5;
		position: fixed;
		top: 0upx;
		left: 0upx;
		z-index: 9;
	}

	.gif {
		width: 500upx !important;
		height: 500upx;
		position: fixed;
		bottom: 50upx;
		left: 50%;
		transform: translate(-50%, 0%);
		z-index: 10;
	}

	.xuanzhong {
		background-color: #5CAE77;
		color: #fff !important;
	}

	.xuanzhong .punch-msg {
		color: #fff;
	}

	.xuanzhong .punch-num {
		color: #fff;
	}

	.xuanzhong .punch-num {
		color: #fff !important;
	}

	.punch-beishu {
		position: absolute;
		top: -30upx;
		right: 0upx;
		color: #fff;
		font-size: 24upx;
		width: 60upx;
		height: 42upx;
		line-height: 42upx;
		text-align: center;
		background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/yuyindaka/qipao1.png");
		background-size: 100%, 100%;
	}

	.sussec {
		width: 280upx;
		height: 78upx;
		background-color: #FF7F01;
		border-radius: 49upx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		line-height: 78upx;
		font-size: 36upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.sussec image {
		width: 44upx;
		height: 44upx;
		margin-right: 16upx;
	}

	.error {
		width: 444upx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 20upx;
		background-color: #fff;
		z-index: 10;
	}

	.error .icon {
		width: 100%;
		height: 196upx;
		background-color: #F2F2F2;
		border-radius: 20upx 20upx 0upx 0upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.error .icon image {
		width: 112upx;
		height: 112upx;
	}

	.error-title {
		font-size: 40upx;
		color: #333;
		text-align: center;
		margin-top: 24upx;
		margin-bottom: 10upx;
	}

	.error-msg {
		box-sizing: border-box;
		padding: 0upx 40upx;
		font-size: 28upx;
		color: #666;
		margin-bottom: 26upx;
	}

	.icons-x {
		width: 60upx;
		height: 60upx;
		position: absolute;
		top: -30upx;
		right: -30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
  .message{
    width: 100%;
    height: 68upx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34upx;
    color: #000;
    font-weight: 500;
    background-color: #D8E6D0;
  }
  .message image{
    width: 26upx;
    height: 36upx;
    margin: 0 10upx;
  }
</style>
